<template>
  <view class="title">
    <text>选择证件照规格</text>
  </view>

  <view class="template">
    <view class="inp">
      <view class="inp-box">
        <input placeholder="搜索证件照规格"
               @blur="handleBlur"
               v-model="inp"/>
      </view>
    </view>

    <view class="i">
      <view
          class="item"
          v-for="(item,index) in templateList"
          :key="index">
        <image class="item-img" :src="test"/>
        <text class="item-title">{{ item.title }}</text>
        <text class="item-spec">{{ item.spec }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import {getPhotoSpecs} from '@/api/photo'
import {onMounted, ref} from 'vue'
import test from '@/static/image/text.png'

const templateList = ref([])
const inp = ref('')

onMounted(async () => {
 await initPage()
})

const initPage = async ()=>{
  const res = await getPhotoSpecs()
  const arr = JSON.parse(res.data)?.slice(1)
  arr?.length % 2 !== 0 ? arr.push({}) : arr
  templateList.value = arr
  console.log(templateList.value)
}

const handleBlur = async () =>{
  if (inp.value !== '') {
    const arr = templateList.value
    templateList.value = arr.filter(i=>i.title?.includes(inp.value))
  }
  else {
    await initPage()
  }
}
</script>

<style lang="scss" scoped>
.title {
  width: 100%;
  height: 150rpx;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  font-size: 35rpx;
  color: white;
}

.template {
  width: 100%;
  height: calc(100vh - 120rpx - 150rpx);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  align-items: center;

  .inp {
    width: 85%;
    height: 120rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20rpx;
    margin-top: 15rpx;

    .inp-box {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 15rpx;
      box-sizing: border-box;
      border-radius: 20rpx;
      background: rgb(240, 242, 240);
    }
  }

  .i {
    width: 100%;
    height: calc(100vh - 100rpx);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: scroll;

    .item {
      border: 1px solid rgb(93, 155, 241);
      border-radius: 20rpx;
      width: 350rpx;
      height: 500rpx;
      margin: 10rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      box-sizing: border-box;
      padding: 10rpx 20rpx;
      color: white;
      font-size: 20rpx;

      .item-img {
        width: 100%;
        height: 100%;
        margin-bottom: 15rpx;
        margin-top: 15rpx;
      }

      .item-title,
      .item-spec {
        margin: 2rpx 0;
      }
    }
  }
}
</style>
